<!--
 * @description 卡片轮播2
 * @author dumeng
 * @date 2022/11/28
 -->
<template>
  <div
    v-if="subscribeList.length > 0"
    id="cardSwiperTwo"
    class="card-swiper-two"
    :style="{
      marginTop: top,
      paddingRight: paddingLeftRight,
      paddingLeft: paddingLeftRight,
      'background-color': bgcolor,
    }"
    :class="{ 'have-list': subscribeList.length > 0 }"
  >
    <img
      v-if="titleImage"
      :src="titleImage"
      alt=""
      :style="{
        width: titleWidth,
        height: height,
      }"
      class="titleImg"
    >
    <div
      class="swipe-main"
      :style="{
        paddingLeft: spacing,
        paddingRight: spacing,
        // background: linearGradBg,
        'background-image': `url(${imgBg})`,
        'background-repeat': 'no-repeat',
        'background-size': '100% 100%',
        'background-position': 'top center',
      }"
    >
      <div v-if="subscribeList.length > 0" class="top-title">
        <!-- <div
          class="title-img"
          :style="{
            width: titleWidth,
            height: height,
            'background-image': `url(${titleImage})`,
            'background-repeat': 'no-repeat',
            'background-size': '100% 100%',
            'background-position': 'top center',
          }"
        ></div> -->
        <div
          class="title"
          :style="{
            color: titleColor,
            paddingTop: spacingTopB,
          }"
        >
          <div class="title-ico">
            <div
              class="icon"
              :style="{
                'background-image': `url(${iconImage})`,
                'background-repeat': 'no-repeat',
                'background-size': '100% 100%',
                'background-position': 'top center',
                width: iconWidth,
                height: iconheight,
              }"
            />
            <div>
              {{ moduleName }}
            </div>
          </div>
          <div class="num" :style="{}">
            {{ subscribeList.length == 0 ? 0 : curIndex + 1 }}
            <span class="total">/{{ subscribeList.length }}</span>
          </div>
        </div>
      </div>
      <van-swipe
        :class="[option.showSubTitle && 'has-sub-title']"
        :show-indicators="indicators"
        :stop-propagation="false"
        :style="{ paddingTop: spacingTop }"
        :autoplay="delayTime"
        class="swipe-box"
        @change="onChange"
      >
        <van-swipe-item
          v-for="(item, i) in subscribeList"
          :key="i"
          class="box-item"
        >
          <div class="img-box" :style="{ height: lunboheight }">
            <label-comp
              v-if="option.resource === 'hd' && labelObj !== undefined"
              :label-list="item.labelList"
              class-name="my-tag"
            />
            <van-image
              :src="
                setImgPath(
                  getMapping(item, 'imgId'),
                  getMapping(item, 'imgUrl')
                )
              "
              :fit="imgType"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/default-placeholder.png" alt="">
              </template>
            </van-image>
          </div>
          <div class="desc etc" :style="{ marginTop: spacingBottom }">
            {{ isInitData ? getMapping(item, "title") : item.title }}
          </div>
          <div v-if="option.showSubTitle" class="time etc">
            {{ isInitData ? getMapping(item, "subTitle") : item.subTitle }}
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import mixins from './../mixins'
import mixin from './mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

export default {
  name: 'CardSwiperTwo',
  components: { LabelComp },
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      curIndex: 0,
      subscribeList: [], // 预约的数据
      defaultSubscribeList: [
        {
          id: '1',
          imgId: '',
          imgUrl: '',
          title: '标题1',
          subTitle: '副标题'
        }, {
          id: '2',
          imgId: '',
          imgUrl: '',
          title: '标题2',
          subTitle: '副标题'
        }
      ],
      pageSize: 0,
      labelObj: undefined
    }
  },
  computed: {
    bgcolor() {
      return this.option.bgcolor || '#fff'
    },
    bgcolorT() {
      return this.option.bgcolorT || '#fff'
    },
    bgcolorB() {
      return this.option.bgcolorB || '#fff'
    },
    linearGradBg() {
      return this.option.isLinearGradBg ? (this.option.bgcolor || '#fff') : '#fff'
    },
    spacingTopB() {
      return this.px2rem(this.option.spacingTopB || 0)
    },
    spacingBottom() {
      return this.px2rem(this.option.spacingBottom || 0)
    },
    titleWidth() {
      return this.px2rem(this.option.titleWidth || 0)
    },
    iconWidth() {
      return this.px2rem(this.option.iconWidth || 0)
    },
    iconheight() {
      return this.px2rem(this.option.iconheight || 0)
    },
    imgBg() {
      return this.option.imgBg
    },
    // 标题背景图
    titleImage() {
      return this.option.titleImage
    },
    // icon图
    iconImage() {
      return this.option.iconImage
    },
    // 标题颜色
    titleColor() {
      return this.option.titleColor
    }
  },
  async created() {
    this.pageSize = this.option.number || 1
    if (this.isInitData) {
      if (this.option.resource === 'hd') {
        this.labelObj = await this.getLabelList()
      }
      await this.initData()
    } else {
      this.subscribeList = this.defaultSubscribeList
    }
  },
  methods: {
    setData(data) {
      if (data !== 'error') {
        if (data.cardSwiperTwo.code === '200' && data.cardSwiperTwo.data) {
          let rows = []
          if (Object.prototype.toString.call(data.cardSwiperTwo?.data) === '[object Array]') {
            rows = data.cardSwiperTwo?.data || []
          } else {
            rows = data.cardSwiperTwo?.data.rows || []
          }

          // const { rows } = data.cardSwiperTwo?.data || []
          if (this.option.resource === 'hd' && this.labelObj !== undefined) {
            this.setLabel(rows, 'subscribeList')
          } else {
            this.subscribeList = rows
          }
        }
      }
    },
    onChange(e) {
      this.curIndex = e
    }
  }
}
</script>
<style type="text/scss" lang="scss">
@import "@/styles/utility/rem.scss";

.card-swiper-two {
  margin: 0 auto;
  position: relative;
  width: rem(750);
  padding: rem(24);
  .titleImg {
    position: absolute;
  }
  .swipe-main {
    background-color: #fff !important;
    border-radius: rem(16);
    margin-bottom: rem(10);
    // padding:rem(12) rem(24);
    display: flex;
    flex-direction: column;
    height: auto;

    .top-title {
      display: flex;
      justify-content: space-between;
      position: relative;
      // .title-img {
      //   display: flex;
      //   // z-index: -1;
      //   position: absolute;
      // }
      .title {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        font-size: rem(32);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: left;
        color: #333333;
        .title-ico {
          display: flex;
          align-items: center;
        }
      }

      .num {
        width: 50%;
        text-align: right;
        font-size: rem(30);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 500;
        color: #333;

        .total {
          color: #999999;
        }
      }
    }

    .swipe-box {
      flex: 1;
      // padding-top: rem(34);
      .box-item {
        width: 100%;
        height: 100%;
        padding-bottom: rem(24);
        position: relative;
        //>img{
        //
        //  background: #f8f8f9;
        //}
        .img-box {
          width: 100%;
          height: rem(368);
          position: relative;

          .van-image {
            width: 100%;
            height: 100%;
            overflow-y: hidden;
            border-radius: rem(16);

            .van-image__error {
              > img {
                width: rem(120);
                height: rem(120);
              }
            }
          }
        }

        .time {
          padding-top: rem(18);
          font-size: rem(24);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #666666;
        }

        .desc {
          margin-top: rem(18);
          font-size: rem(30);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: bold;
          text-align: left;
          color: #333333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }

        .bottom-line {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .subscribe {
            margin-top: rem(18);
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            color: #444444;

            > span {
              display: inline-block;
            }

            .img {
              vertical-align: middle;
              margin-right: rem(15);

              > img {
                width: rem(22);
                height: rem(28);
              }
            }
          }

          .l-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            // position: absolute;
            // right: rem(30);
            // bottom: rem(3);
            width: rem(132);
            height: rem(54);
            @include bg-color($mainColor);
            border-radius: rem(27);
            font-size: rem(24);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
          }
        }
      }

      &.has-sub-title {
        .van-swipe__indicators {
          top: rem(340);
        }
      }

      .van-swipe__indicators {
        bottom: rem(96);
        .van-swipe__indicator--active {
          @include bg-color($mainColor);
        }
      }
    }
  }
}
</style>
